<template>
  <Popup ref="submitPopRef">
    <div class="submit_pop">
      <div class="tip">提示</div>
      <div class="tip_text">请先填写顾客信息再提交顾客报单哦~</div>
      <Button :styles="{borderRadius: '80rpx'}" color="#1890FF" height="80rpx" width="440rpx" @confirm="confirmFn">我知道了</Button>
    </div>
  </Popup>
  <scroll-view>
    <div class="wrap">
      <Navigation :styles="{fontWeight: 700}" back class="nav" title="顾客报单" white />
      <div :style="{background: autoBG(bgImage), backgroundSize: '100% 100%'}" class="title">填写顾客需求资料</div>
      <div class="form">
        <div class="item">
          <div class="label">姓名</div>
          <Input
            v-model:value="form.name"
            placeholder="请输入顾客姓名"
          />
        </div>
        <div class="item">
          <div class="label">手机号码</div>
          <Input
            v-model:value="form.mobile"
            maxlength="11"
            placeholder="请输入顾客手机号码"
          />
        </div>
        <div class="item">
          <div class="label">性别</div>
          <div>
            <RadioSelect v-model:value="form.sex" :config="sexEnum" />
          </div>
        </div>
        <div class="item">
          <div class="label">意向项目</div>
          <div class="flex_sb_cen" style="padding-left: 11px; flex: 1 1" @tap.stop="changeProjectShow">
            <div>
              <template v-if="!form.projectType">
                <span style="color: rgba(0, 0 , 0, 0.25);font-size: 28rpx;">请选择意向项目</span>
              </template>
              <template v-else>
                <span>{{ projectText }}</span>
              </template>
            </div>
            <Icon :styles="{opacity: 0.5 }" name="icon-youjiantou" size="30" />
          </div>
        </div>
        <div class="item">
          <div class="label">结识途径</div>
          <div class="flex_sb_cen" style="padding-left: 11px; flex: 1 1" @tap="knowWayRef.change()">
            <div>
              <template v-if="!form.knowWayText">
                <span style="color: rgba(0, 0 , 0, 0.25);font-size: 28rpx;">请选择结识途径</span>
              </template>
              <template v-else>
                <span>{{ form.knowWayText }}</span>
              </template>
            </div>
            <Icon :styles="{opacity: 0.5 }" name="icon-youjiantou" size="30" />
          </div>
        </div>
        <div class="item">
          <div class="label">结识日期</div>
          <div class="flex_sb_cen" style="padding-left: 11px; flex: 1 1" @tap="knowDateRef.change()">
            <div>
              <template v-if="!form.knowTime">
                <span style="color: rgba(0, 0 , 0, 0.25);font-size: 28rpx;">请选择结识日期</span>
              </template>
              <template v-else>
                <span>{{ form.knowTime }}</span>
              </template>
            </div>
            <Icon :styles="{opacity: 0.5 }" name="icon-youjiantou" size="30" />
          </div>
        </div>
      </div>
      <div class="footer">
        <Button height="80rpx" size="L" width="690rpx" @tap.stop="saveForm">立即提交</Button>
        <div class="go_operation" @tap.stop="goOperation">
          推荐记录 >
        </div>
      </div>
    </div>
  </scroll-view>
  <!-- 意向项目弹出 -->
  <Drawer
    ref="projectRef"
    mask
  >
    <StateSelect :config="project" title="请选择意向项目" @cancel="changeProjectShow" @value="changeProjectShow" />
  </Drawer>
  <!-- 结识途径 -->
  <Drawer ref="knowWayRef">
    <div class="popup_box">
      <div class="popup_title">
        <div>请选择结识途径</div>
        <div class="icon_close" @tap="knowWayRef.change()">
          <Icon name="icon-shanchu-4" size="28" />
        </div>
      </div>
      <div class="popup_body">
        <div v-for="(item, index) in knowWayOptions" :key="index" class="way_item flex_sb_cen" @tap="selectWayFn(item, index)">
          <div>{{ item.wayName }}</div>
          <div v-if="selectIndex === index">
            <Icon height="28" name="icon-dui-blue" width="36" />
          </div>
        </div>
      </div>
      <div :style="keepBottomSafeDis()" class="flex_cen_cen mt20">
        <div class="btn_primary" style="width: 686rpx" @tap="confirmKnowWayFn">确定</div>
      </div>
    </div>
  </Drawer>
  <!-- 结识日期 -->
  <Drawer ref="knowDateRef" mask>
    <DateSelect :max="maxDate" title="请选择结识日期" @cancel="knowDateRef.change()" @value="dateChangeFn" />
  </Drawer>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from 'vue'
import Button from '@C/Button.vue'
import Input from '@C/Input.vue'
import RadioSelect from '@C/RadioSelect.vue'
import Drawer from '@C/Drawer.vue'
import StateSelect from '@C/StateSelect.vue'
import Navigation from '@C/Navigation.vue'
import { Msg } from '@C/Msg'
import { autoBG, keepBottomSafeDis, debouncePro, checkPhoneFn } from '@U/common'
import { addCustomerDeclaration } from '@P_GL/ZhiKe/request'
import Popup from '@C/Popup.vue'
import Icon from '@C/Icon.vue'
import DateSelect from '@C/DateSelect.vue'
import { RegText } from '@U/regular'
import getDate from '@U/getDate'
import { Router } from '@/router'
import type { IObj } from '@/interface'

const nowDate = getDate() as IObj
const maxDate = computed(() => `${nowDate.Y}-${nowDate.M}-${nowDate.D}`)
const bgImage = `${import.meta.env.VITE_SHOUDAO_OSS_URL}/add_taxation_bg.png`

// 性别
const sexEnum = [
  { label: '女', key: 1 },
  { label: '男', key: 0 },
]

// 意向项目
const projectRef = ref()
const project = [
  { label: '皮肤', value: '0' },
  { label: '美妆', value: '1' },
  { label: '微整', value: '2' },
]
const projectText = computed(() => (form.projectType ? project.filter((p: IObj) => p.value === form.projectType)[0].label : ''))
const changeProjectShow = (projectValue?: string) => {
  projectRef.value?.change()
  if (typeof projectValue === 'string' && projectValue) {
    form.projectType = projectValue
  }
}

// 结识途径
const knowWayRef = ref()
const knowWayOptions = [
  {
    wayName: '朋友介绍',
    value: 0,
  },
  {
    wayName: '活动结识',
    value: 1,
  },
  {
    wayName: '亲朋好友',
    value: 2,
  },
  {
    wayName: '偶然相识',
    value: 3,
  },
]
const selectIndex = ref(0)
let knowWayText = '朋友介绍'
const selectWayFn = (item: object, index: number) => {
  form.knowWays = item.value
  knowWayText = item.wayName
  selectIndex.value = index
}
const confirmKnowWayFn = () => {
  form.knowWayText = knowWayText
  knowWayRef.value.change()
}
// 结识日期
const knowDateRef = ref()
const dateChangeFn = (date: string) => {
  form.knowTime = date
  knowDateRef.value.change()
}
// 表单
const form = reactive(<IObj>{
  name: '',
  mobile: '',
  sex: 1,
  projectType: '',
  knowWays: 0,
  knowWayText: '',
  knowTime: '',
})

// 提交弹框
const submitPopRef = ref()
const confirmFn = () => submitPopRef.value.change()

// 提交表单
const saveForm = debouncePro(() => innerSave(), 1000)
const innerSave = async () => {
  if (form.name === '' && form.mobile === '' && form.projectType === '') return submitPopRef.value.change()
  if (form.name === '') return Msg({ msg: '请填写顾客姓名' })
  if (!/^[\u4e00-\u9fa5_a-zA-Z]{2,}$/.test(form.name)) return Msg({ msg: '请输入规范的顾客姓名且文字之间不能有空格' })
  if (form.mobile === '') return Msg({ msg: '请填写顾客手机号码' })
  if (!checkPhoneFn(form.mobile)) return Msg({ msg: '手机号格式不正确' })
  if (form.projectType === '') return Msg({ msg: '请选择意向项目' })
  if (form.knowWayText === '') return Msg({ msg: '请选择结识途径' })
  if (form.knowTime === '') return Msg({ msg: '请选择结识日期' })
  const { code } = await addCustomerDeclaration(form).finally(() => {})
  if (code === 200) {
    Msg({ icon: 'success', msg: '提交成功' })
    setTimeout(() => Router.redirect('operation', { key: 'gl_hhr_taxationForm' }), 1500)
  }
}

// 去推荐记录：我的报单
const goOperation = () => Router.push('myCustomer', { key: 'gl_hhr_taxationForm' })

</script>

<style lang="less" scoped>
.submit_pop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 520rpx;
  background: #FFFFFF;
  padding: 40rpx 0;
  border-radius: 48rpx;
  box-sizing: border-box;
  .tip {
    height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #202021;
    line-height: 50rpx;
  }
  .tip_text {
    width: 418rpx;
    //height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #202021;
    line-height: 44rpx;
    margin: 32rpx 0 56rpx;
  }
}
.wrap {
  background: white;
}
.nav {
  position: fixed;
  left: 0;
}
.title {
  height: 330rpx;
  font-size: 48rpx;
  font-weight: 700;
  color: #FFFFFF;
  padding: 226rpx 0 0 60rpx;
  margin-bottom: 40rpx;
}
.form {
  padding: 0 56rpx 78rpx 66rpx;
}
.item {
  display: flex;
  align-items: center;
  height: 86rpx;
  margin-bottom: 42rpx;
  border-bottom: solid 1rpx rgba(0, 0, 0, 0.1);
  .label {
    width: 155rpx;
  }
  &:last-child {
    margin-bottom: 0;
  }
}
.footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 50rpx;
  .go_operation {
    color: #8c8c8c;
    font-size: 28rpx;
    margin-top: 28rpx;
  }
}
.popup_box {
  .way_item {
    font-weight: 400;
    font-size: 32rpx;
    color: rgba(0,0,0,0.85);
    line-height: 30rpx;
    padding-bottom: 34rpx;
    border-bottom: 2rpx solid rgba(0,0,0,0.1);
    margin-top: 30rpx;
  }
}
</style>
